<template>
  <div class="box">
    <Chart :option="options" />
  </div>
</template>

<script lang="js">
import {defineComponent, onBeforeUnmount, reactive} from 'vue'
import Chart from '@/views/charts/index.vue'
import option from './modules/pie'
import admin from "@/api/admin.js";
export default defineComponent({
  components: {
    Chart
  },
  setup() {

    let timer = null;
    const options = reactive(option)

    const ageCount = new Array(5).fill(0);
    const getUserAge = () => {
      const userAge = {
        status: null,
        pageIndex: 0,
        pageSize: 10
      };
      admin.patientSearch(userAge)
          .then((res) => {
            if (res.data.code === 200) {
              // 将状态码转换为中文描述
              const dataResult = res.data.data
              //提取age的值并存放在数组中
              // 遍历 result 数组
              dataResult.result.forEach(user => {
                const age = user.age;
                if (age >= 0 && age <= 22) {
                  ageCount[0]++;
                } else if (age >= 23 && age <= 30) {
                  ageCount[1]++;
                } else if (age >= 31 && age <= 45) {
                  ageCount[2]++;
                } else if (age >= 46 && age <= 60) {
                  ageCount[3]++;
                } else if (age > 60) {
                  ageCount[4]++;
                }
              });

            }
            console.log(ageCount)
          });


    }
    getUserAge()


    // 模拟异步请求
    timer = setTimeout(() => {
      options.series[0].data = ageCount
      //options.series[1].data = datar2
    },1000)
    // 组件销毁时清除定时器
    onBeforeUnmount(() => {
      clearInterval(timer)
      timer = null;
    })


    return {
      options
    }
  }
})
</script>

<style lang="scss" scoped>
  .box {
    //margin: 20px auto 0;
    width: calc(100% - 40px);
    //height: 300px;
    background: var(--system-page-background);
    //padding: 20px 20px 10px;
    //overflow: hidden;
  }
</style>